<template>
	<!-- 20230426 -->
	<view class="mall-category-page">
		<!-- 页面内容 -->
		<view class="page-content">
			
			<!-- 搜索框 固定在顶部 -->
			<view class="jc-header padding-lr-30 bg-main">
				
				<!-- #ifdef APP-PLUS -->
				<!-- 占位 view，避免页面内容出现在状态栏 -->
				<view class="height-status-bar"></view>
				<!-- #endif -->
				
				<!-- 搜索 -->
				<view class="height-header flex justify-between align-center">
					<!-- LOGO 110 * 60 -->
					<image :src="logoImg" class="jc-image margin-right-15" style="width: 110rpx;height: 60rpx;">
					</image>
					<!-- 搜索框 -->
					<view class="width-100p" @click="go('/pages/mall/search')">
						<!-- 组件：搜索框 -->
						<ty-bar-search :value.sync="keyword" bg-color="#FFF" :disabled="searchDisabled"></ty-bar-search>
					</view>
				</view>
			</view>

			<!-- 一二级分类 -->
			<view class="category-block padding-top-status-bar-header">
				<ty-tab-category :list="category"></ty-tab-category>
			</view>

		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">
			
		</view>
	</view>
</template>

<script>
	import mall from './api/mall.js'
	import project from '../project/api/project.js'
	export default {
		data() {
			return {
				// 默认搜索框文字
				keyword: '', 
				// 搜索框禁用
				searchDisabled: true, 
				// LOGO
				logoImg: '', 
				
				active: 0,
				// 分类
				category: [], 

				category_index: 0
			}
		},

		onReady() {
			// 获取LOGO
			this.getLogo()
			
			// 获取分类
			this.getCategory()
		},

		methods: {
			//获取LOGO
			getLogo() {
				project.getLogo().then(res => {
					if (res.code == 0) {
						this.logoImg = res.data.config.logo_img
					}
				})
			},

			//获取分类
			getCategory() {
				mall.listCategory().then(res => {
					if (res.code == 0) {
						this.category = res.data.category
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 一二级分类区域 */
	.category-block {
		width: 100%;
		
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--status-bar-height));
		/* #endif */
		
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom));
		/* #endif */
		
		/* #ifndef APP-PLUS|H5 */
		height: calc(100vh);
		/* #endif */
	}
</style>
